<template>
	<div class="body_inner">

		<div class="inquiry_page">
			<div class="page_top">
				<a href="/mypage"><i class="xi-arrow-left"></i></a>

				<div class="allMenu_btn" v-if="!allMenuShow" @click="allMenuShow = true">
					<div class="x"></div>
					<div class="y"></div>
					<div class="z"></div>
				</div>
				<div class="allMenu_btn open" v-if="allMenuShow" @click="allMenuShow = false">
					<div class="x coll rotate30 rotate45"></div>
					<div class="y coll" style="display: none;"></div>
					<div class="z coll rotate150 rotate135"></div>
				</div>
			</div>

			<div class="page_contents">
				<h3>
					1:1 문의
					<p>사용중 불편사항이나 <br>궁금한 점이 있으신가요?</p>
				</h3>

				


				<!-- 문의가 없을 경우 -->
				<form action="" class="form_boundary">
					<input type="text" placeholder="제목을 입력 해주세요." v-model="title" class="input_form">
					<textarea class="textarea_form" placeholder="내용을 입력 해주세요." style="margin-top: 8px;" v-model="content"></textarea>
					<!-- <div class="inquiry_box inquiry_box_x">
		  1:1 문의에 대한 자료가 없습니다.
		</div> -->
				</form>

				<div class="inquiry_link">
					<!-- <a href="mailto:" class="btn">이메일 문의</a> -->
					<div @click="tijiaoQ()" class="btn kakao" style="width: 100%;">제출</div>
				</div>
				<!-- 문의가 있을 경우 -->
				<form action="" class="form_boundary">
					<div class="inquiry_box" style="margin-top:15px;" v-for="(value,index) in dataList" :key="index">
						<div class="title" @click="showH(index)">
							<p>
								{{value.title}}
								<span>{{value.create_time}}</span>
							</p>
							<i class="xi-angle-down"></i>
						</div>
				
						<div class="text" v-if="value.show">
							<p>{{value.remark}}</p>
							<!-- <button class="correction">수정하기</button> -->
						</div>
					</div>
				</form>
			</div>
		</div>

		<nav id="allMenu" v-if="allMenuShow">
			<ul>
				<li>
					<a href="/main">
						<p><i class="xi-home"></i>홈</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/staking">
						<p><i class="xi-bank"></i>상품 구매</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/staking_sum">
						<p><i class="xi-credit-card"></i>상품 구매 합계</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/interest">
						<p><i class="xi-piggy-bank"></i>데일리내역</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/withdraw_apply">
						<p><i class="xi-money"></i>출금신청</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/withdraw_list">
						<p><i class="xi-wallet"></i>출금/송금내역</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/recommender">
						<p><i class="xi-group"></i>추천인 목록</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>

				<li>
					<a href="/mypage">
						<p><i class="xi-profile-o"></i>마이페이지</p>
						<i class="xi-angle-right-min"></i>
					</a>
				</li>
			</ul>

			<div class="btn" @click="logout()">로그아웃</div>
		</nav>
	</div>
</template>
<script>
	import axios from "axios";
	export default {
		data() {
			return {
				showModel: false,
				indeData: {},
				is_master: null,
				accountList: [],
				next_account: '',
				allAccount: false,
				info: {
					is_master: null,
					max_proportion: null,
					next_account: "",
					now_proportion: 0,
					now_reward: "",
					now_reward_pdt: "",
					now_usdt: "",
					now_usdt_pdt: "",
					pdt: "",
					self_buy_price: "",
				},
				dataList: [],
				loading: false,
				withNum: '',
				address: '',
				loading: false,
				allMenuShow: false,
				content:'',
				title:''
			};
		},
		created() {
			this.getMessageList();
		},
		mounted() {
		},
		methods: {
			tijiaoQ() {
				var _this = this;
				axios.post('https://admintest.pdt-daily.com/api/user/add_message', {
					title:_this.title,
					content:_this.content,
				}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'Access-Token': localStorage.getItem('token')
					}
				}).then(function(response) {
					if (response.data.status == 200) {
						alert('1:1 문의가 접수 되었습니다. ');
					}
				}).catch(function(error) {
					console.log(error);
				});
			},
			getMessageList() {
				var _this = this;
				axios.post('https://admintest.pdt-daily.com/api/user/message_list', {}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'Access-Token': localStorage.getItem('token')
					}
				}).then(function(response) {
					console.log(response)
					for(var i=0;i<response.data.data.list.data.length;i++){
						response.data.data.list.data[i].show = false;
					}
					_this.dataList = response.data.data.list.data;
				}).catch(function(error) {
					console.log(error);
				});
			},
			showH(index){
				this.dataList[index].show = !this.dataList[index].show;
			},
			logout() {
				var _this = this;
				axios.post('https://admintest.pdt-daily.com/api/user/logout', {}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'Access-Token': localStorage.getItem('token')
					}
				}).then(function(response) {
					console.log(response);
					if (response.data.status == 200) {
						alert('로그아웃 되었습니다.');
						localStorage.setItem('token', '');
						_this.$router.push('/login');
					}
				}).catch(function(error) {
					console.log(error);
				});
			}
		},
	};
</script>
<style>
	.textarea_form {
		width: 100%;
		padding: 2rem;
		font-size: 2rem;
		color: #222222;
		border: none;
		outline: none;
		border-radius: 1rem;
		text-align: left;
		height: 32rem;
		resize: none;
	}
	.input_form {
		width: 100%;
		padding: 2rem;
		font-size: 2rem;
		color: #222222;
		border: none;
		outline: none;
		border-radius: 1rem;
		height: 8rem;
	}
</style>